

// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/background.png";

// Hero image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
heroReady = true;
};
heroImage.src = "images/hero.png";

// Monster image
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () {
monsterReady = true;
};
monsterImage.src = "images/monster.png";


// Monster image2
var monsterReady2 = false;
var monsterImage2 = new Image();
monsterImage2.onload = function () {
monsterReady2 = true;
};
monsterImage2.src = "images/monster.png";
// Game objects
var hero = { speed: 256, // movement in pixels per second
x: 0, y: 0
};
var monster = { x: 0, y: 0 };
var monster2 = { x: 20, y: 20 };
var monstersCaught = 0;

var keysDown = {};
addEventListener("keydown", function (e) { keysDown[e.keyCode] = true; }, false);
addEventListener("keyup", function (e) { delete keysDown[e.keyCode]; }, false);

var start = true;
var snd = new Audio("audio/bell.mp3");
// Reset the game when the player catches a monster
var reset = function () {
	monstersCaught=0;
	if (start)
	{
		hero.x = canvas.width / 2;
		hero.y = canvas.height / 2;
		start = false;
	}
	
	if(snd.currentTime > 0)
	{
		snd.currentTime=0;
		//this is to make sure the sound resets if it is still playing
	}
		snd.play();

// Throw the monster somewhere on the screen randomly
var r = 0;
var s = 0;
     r= Math.random() * 1.32;
     s= Math.random() * 1.32;
	monster.x = (r * (canvas.width - 200));
	monster2.x = (s * (canvas.width - 200));
	



	monster.y = (r * (canvas.height - 200));
	monster2.y = (s * (canvas.height - 200));


};


// Update game objects
var update = function (modifier) 
{

	if (38 in keysDown) 
	{ // Player holding up
		if(hero.y > 32) 
		{
			hero.y = hero.y - hero.speed * modifier ;
		}
		else if(hero.y < width-32)
		{
			hero.y = canvas.height - 32;
		}
		
	}


					if (40 in keysDown) 
					{ // Player holding down
					//hero.y = (hero.y + hero.speed * modifier) % canvas.height;
							if(hero.y < canvas.height - 82) 
							{
								hero.y = hero.y + hero.speed * modifier ;
							}
								else 
								{
									hero.y = canvas.height - 82;
								}
					}




if (37 in keysDown) 
{ // Player holding left

     if (hero.x > 32)  
     {
	  hero.x = hero.x - hero.speed * modifier;     	
     }
	     else if (hero.y < height-32)
	     {
	     	hero.x= canvas.width - 32;	
	     }
}



if (39 in keysDown) 
{ // Player holding right
//hero.x = (hero.x + hero.speed * modifier) % canvas.width;
 if (hero.x < canvas.width - 82)  
     {
	  hero.x = hero.x + hero.speed * modifier;     	
     }
	     else
	     {
	     	hero.x= canvas.width - 82;	
	     }
}




// Are they touching?
if ( hero.x <= (monster.x + 32) && monster.x <= (hero.x + 32) && hero.y <= (monster.y + 32) && monster.y <= (hero.y + 32) ) 
{
++monstersCaught; ck=1;
monster.x = canvas.width + 200;
monster.y = canvas.height + 200;

if(monstersCaught > 1)
 {
 reset();
 }
}

if ( hero.x <= (monster2.x + 32) && monster2.x <= (hero.x + 32) && hero.y <= (monster2.y + 32) && monster2.y <= (hero.y + 32) ) {
++monstersCaught;
ck=2;
monster2.x = canvas.width + 200;
monster2.y = canvas.height + 200;

if(monstersCaught >1)
 {
 reset();
 }
 }
 
 
};


// Draw everything
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0); }
if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y); }
if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y); }

if (monsterReady2) {
ctx.drawImage(monsterImage2, monster2.x, monster2.y); }
// Score
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Goblins caught: " + monstersCaught, 32, 32);
};


// The main game loop
var main = function () {
var ck=0;
var now = Date.now();
var delta = now - then;
update(delta / 1000); render(); then = now;
};



// Let's play this game!
reset();
var then = Date.now();
setInterval(main, 1); // Execute as fast as possible